<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" type="image/x-icon" href="Images/wheel.jpg" />
    <title>My Profile</title>
    <link rel="stylesheet" href="css/constant.css" type="text/css" />
    <link rel="stylesheet" href="css/template.css" type="text/css" />
    <link rel="stylesheet" href="css/virtuemart.css" type="text/css" />
    <link rel="stylesheet" href="css/designTable.css" type="text/css" />
    <sj:head jqueryui="true" />
    <style type="text/css">
   		.frmViewCategory{
   			margin:5px 0px;
   			border: double 1px #DBDBDB; 
   			-moz-border-radius:8px; 
   			width: 99%; 
   			height: 250px;
   		}
   		.frmViewCategory .image{
   			float: left;
   			margin:5px; 
   			border-right: dashed 1px #DBDBDB;  
   			width: 40%;height: 94%;
   		}
   		.frmViewCategory .infor{
   		float: left; margin:5px;  width: 55%;height: 94%;
   		}
   		.frmViewCategory .infor .title
   		{
   		color:blue; font-weight: bold; font-size: 20px; padding: 10px ;
   		}
   		.frmViewCategory .infor .content
   		{
   		padding: 5px;
   		}
   		.frmViewCategory .infor .link{
   		float: right; margin-right: 5px; margin-bottom: 5px;
   		}
   		.input{
   			width: 70px;
   			height: 25px;
   		}
   	</style>
</head>
<body id="body">
    <div class="main">
        <div class="borderTop">
            <div class="borderLeft">
                <div class="borderRight">
                    <div class="borderBottom">
                        <div class="cornerTopLeft">
                            <div class="cornerTopRight">
                                <div class="cornerBottomLeft">
                                    <div class="cornerBottomRight">
                                        <div class="width">
                                            <jsp:include page="header.jsp" />
                                            <div id="nav">
                                                <jsp:include page= "menu.jsp"/>
                                            </div>
                                            <div id="wrapper">
                                                <div id="left">
                                                    <div class="space">
                                                        <div class="width">
                                                        	<jsp:include page="bodyleft.jsp"/>
                                                        	<jsp:include page="partner.jsp"/>
                                                            
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="container">
                                                    <div class="width">
                                                        
                                                        <%--start body content--%>
                                                        
                                                        <div id="vmMainPage">
                                                        		<h3 class='pageTitle' style="width: 100%;">
                                                                <span><s:property value="typesOfWheel.productName"/> </span></h3>
                                                                <sj:tabbedpanel id="formTag" selectedTab="0">
																	<sj:tab id="infor" target="frmInfo" label="Thông tin tìm kiếm" />
																	<sj:tab id="inforTechnology" target="frmTechnology" label="Công nghệ" />
																	<sj:tab id="inforBenifit" target="frmBenifit" label="Tính năng" />
																	<div id="frmInfo">
																		<div class="frmViewCategory">
			                                                           		<div class="image">
			                                                           			<img src="images/findbysize1.jpe" alt="" width="100%" height="100%" />
			                                                           		</div>
			                                                           		<div class="infor">
			                                                           			<h3 class="title">Tìm theo kích cỡ</h3>
			                                                           			<p class="content"> </p>
			                                                           			<s:form action="#" method="post" theme="simple" cssClass="yform">
			                                                           			<p style="margin-left: 15px;">Thông số: <input id="width" style="margin-left: 40px;" class="input" /> &nbsp; / &nbsp;<input id="height" class="input"  /> &nbsp;&nbsp;&nbsp;<input id="tireStructure" class="input" /> </p>
			                                                           			<p style="margin-left: 15px;">Chỉ số tải trọng: <input class="input" style="margin-left: 10px;"  /></p> 
			                                                           			<p style="margin-left: 15px;">Chỉ số vận tốc: <s:select cssClass="input" cssStyle="margin-left: 15px;"   label="Chỉ số vận tốc" list="#{'A':'120','B':'1223' }"></s:select>(km/h)</p>
			                                                           			<s:url id="searchProduct" value="/#"/>
																	            <sj:submit 
																	            	title="Tìm kiếm" cssStyle="float:right; margin-right:10px;"
																	            	id="subSearchProduct"
																	            	href="%{searchProduct}"	            	
																	            	value="Tìm kiếm"
																	            	button="true"
																	            	/>	
																	            </s:form>		
			                                                           		</div>
			                                                           		<p style="clear: both;"></p>
			                                                           	</div> 															
		                                                        	
		                                                        		
		                                                        		
																	</div>
																	<div id="frmTechnology"><s:property value="typesOfWheel.technology"/></div>
																	<div id="frmBenifit"> <s:property value="typesOfWheel.productBenifit"/></div>
																</sj:tabbedpanel>
                                                        		<div id="tblResult" style="margin-top: 10px;">
                                                           		 <s:if test="lstWheelDetails==null">Không có dữ liệu</s:if>
													            	<s:if test="lstWheelDetails!=null">
		                                                           		<table width="100%" cellpadding="0" cellspacing="0" id="box-table-a" summary="Employee Pay Sheet">
															            <thead>
															              <tr>													                
															                <th width="136" scope="col">Mã sản phẩm</th>
															                <th width="102" scope="col">Chiều rộng </th>
															                <th width="109" scope="col">Tỉ lệ</th>
															                <th width="129" scope="col">Cấu trúc lốp</th>
															                <th width="171" scope="col">ĐK lazing</th>
															                <th width="123" scope="col">Tải trọng</th>
															                <th width="90" scope="col">Vận tốc</th>
															                <th width="90" scope="col">&nbsp;</th>
															              </tr>
															            </thead>
															            <tbody>
															            	
															            	<s:iterator value="lstWheelDetails">
															            		<tr>													                
																	                <td><a title="Chi tiết sản phẩm <s:property value='wheelDetailID'/>" href="Dealer_wheelDetail?w=<s:property value='wheelDetailID'/>"><s:property value="wheelDetailID"/> </a> </td>
																	                <td><s:property value="width"/></td>
																	                <td><s:property value="height"/></td>
																	                <td><s:property value="tireStructure"/></td>
																	                <td><s:property value="diameter"/></td>
																	                <td><s:property value="loads"/></td>
																	                <td><s:property value="speed.speedSymbol"/></td>
																	                <td width="90"><a href="#" class="mua" title="">Mua</a></td>
																	              </tr>
															            	</s:iterator>
															             
															               <%					
																				int totalPage =1;
																				if(session.getAttribute("totalPageOfviewLstWheelDetail")!=null){
																					totalPage =(Integer) session.getAttribute("totalPageOfviewLstWheelDetail");
																				}
																			%>
															              <tr class="footer">
															                <td colspan="3">&nbsp;</td>
															                <td align="right">&nbsp;</td>
															                <td colspan="4" align="right">
																			<!--  PAGINATION START  -->             
															                    <div class="pagination">
				
																					<%
																						if(totalPage>1){
																							int startPage = 1;
																							if(session.getAttribute("startPage")!=null)
																								startPage = (Integer)session.getAttribute("startPage");							
																							int totalCurrentPage = 5;
																							if(totalCurrentPage>totalPage)
																								totalCurrentPage=totalPage;
																							// Hien thi Button Previous date
																							%>												
																								<s:if test="prePage==-1">
																									<span class="previous-off">&laquo; Trước</span>
																								</s:if>
																								<s:if test="prePage!=-1">
																								<a href="Dealer_paggingViewLstWheelDetail?p=<s:property value='prePage'/>">&laquo; Trước</a> 
																								</s:if>
																							<%		
																							
																							for(int i=0; i< totalCurrentPage; i++){
																							int tem = i+ startPage;
																							String currentPage = request.getParameter("p");
																							if(currentPage==null){
																								currentPage="1";
																							}
																							if(currentPage!=null && currentPage.equals(Integer.toString(i+startPage))){
																							%>  <span class="active"><%=tem %></span>
																							<%
																							}else{
																							%>			
																								<a href="Dealer_paggingViewLstWheelDetail?p=<%=tem %>"> <%=tem %></a>
																							<%									
																								}
																							}
																							%>												
																							<s:if test="nextPage==-1">
																								<span class="next-off">&laquo; Sau</span>
																							</s:if>
																							<s:if test="nextPage!=-1">
																							<a href="Dealer_paggingViewLstWheelDetail?p=<s:property value='nextPage'/>"> Sau &laquo;</a>																					
																							</s:if>
																						<%		
																						}
																					%>
															                    <!--<span class="previous-off">&laquo; Previous</span>
															                    <span class="active">1</span>
															                    <a href="#">2</a>
															                    <a href="#">3</a>
															                    <a href="#">4</a>
															                    <a href="#">5</a>
															                    <a href="#" class="next">Next &raquo;</a>
															                    --></div>  
															                <!--  PAGINATION END  -->       
															                </td>
															              </tr>
															            </tbody>
															          </table>
													           </s:if>
                                                           	</div>
                                                           	
                                                           	
                                                				</div>
                                                           
                                                        </div>
														
														<%--end body content--%>

                                                    </div>
                                                </div>
                                            </div>
                                            <jsp:include page= "footer.jsp"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>
</html>
